<template>
    <div id="popup-search-sq" ref="pop">
        <div class="header">
            <div>搜索结果</div>
            <div id="close" @click="del">X</div>
        </div>
        <table>
            <tr>
                <td>事件编号</td>
                <td>{{ list[0] }}</td>
            </tr>
            <tr>
                <td>事件类型</td>
                <td>
                    {{ list[1] }}
                </td>
            </tr>
            <tr>
                <td>事件等级</td>
                <td>{{ list[2] }}</td>
            </tr>
            <tr>
                <td>发生时间</td>
                <td>{{ list[3] }}</td>
            </tr>
            <tr>
                <td>发生地点</td>
                <td>{{ list[4] }}</td>
            </tr>
            <tr v-show="menuStore.userType === 'traffic'">
                <td>车牌号</td>
                <td>{{ list[5] }}</td>
            </tr>
            <tr v-show="menuStore.userType === 'traffic'">
                <td>驾驶员</td>
                <td>{{ list[6] }}</td>
            </tr>
        </table>
    </div>
</template>

<script setup>
import { ref, onMounted, inject, watch } from 'vue'
import { useMenuStore } from '../../store'
import { query } from '../../utils/query';
let pop = ref()
// let userType = ref("")
// userType.value = menuStore.userType
const menuStore = useMenuStore()
let $map = null
let service = null
let list = ref([])
service = {
    name: 'guanggu',
    layerId: 2
}
//实例化一个矢量图层drawLayerr用于高亮显示结果
let drawSource = new ol.source.Vector({

});
let drawLayer = new ol.layer.Vector({
    title: "搜索标注层",
    source: drawSource,
    style: new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [0.5, 0.5],
            anchorOrigin: 'top-right',
            anchorXUnits: 'fraction',
            anchorYUnits: 'pixels',
            offsetOrigin: 'top-right',
            // offset:[0,10],
            //图标缩放比例
            scale: 0.5,
            //透明度
            opacity: 0.75,
            //图标的url
            src: '/src/data/location.png',
        }),
        //填充色
        // fill: new ol.style.Fill({
        //     color: 'rgba(255, 0, 0, 0.5)'
        // }),
        // //边线样式
        // stroke: new ol.style.Stroke({
        //     color: 'rgba(255,204, 51, 1)',
        //     width: 1
        // })
    })
});
//回调函数
function SearchCallback(result) {
    drawSource.clear()
    let format = new Zondy.Format.PolygonJSON();
    //将MapGIS要素JSON反序列化为ol.Feature类型数组
    let features = format.read(result);
    drawSource.addFeatures(features);
    $map.addLayer(drawLayer);
    console.log(result)
}
function handlePointMove(e) {
    var pixel = $map.getEventPixel(e.originalEvent);
    var hit = $map.hasFeatureAtPixel(pixel);
    if (hit) {
        $map.getTargetElement().style.cursor = "pointer"
    } else {
        $map.getTargetElement().style.cursor = "default"
    }
}
function setPopup(e) {
    let query_position = e.coordinate
    query({
        service,
        position: query_position,
        callback: handleQuery
    })
    //设置pop显示
    pop.value.style.display = "block";
    // 获取当前点击的点是否存在要素, 并返回
    const popup_feature = $map.forEachFeatureAtPixel(
        //
        e.pixel,
        function (feature, drawLayer) {
            return feature
        }
    )
    if (popup_feature) {
        var position = popup_feature.getGeometry().flatCoordinates
        popup.setPosition(position)
        $map.getView().animate({
            /* 设置漫游的中心点 */
            center: position,
            /* 放大缩小级别 */
            zoom: 18,
            /* 事件 */
            duration: 5000
        })
    }
}
function handleQuery(result) {
    list.value = result.SFEleArray[0].AttValue
}
let popup = null
onMounted(() => {
    $map = inject("$map")
    $map.on('pointermove', handlePointMove);
    $map.on("click", setPopup)
    var container = document.getElementById('popup-search-sq');
    popup = new ol.Overlay({
        //要转换成overlay的HTML元素
        element: container,
        //当前窗口可见
        autoPan: true,
        //Popup放置的位置
        positioning: 'bottom-center',
        //是否应该停止事件传播到地图窗口
        stopEvent: true,
        autoPanAnimation: {
            //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
            duration: 250,
        },
    })
    $map.addOverlay(popup)
})
//搜素关键字
watch(
    () => menuStore.keyWord,
    (val) => {
        pop.value.style.display = "none";
        query({
            service,
            callback: SearchCallback,
            where: `事件类型 like '%${val}%'`
        })
    },
    { deep: true }
)
//离开搜索框关闭图层
watch(
    () => menuStore.activeIndex,
    (val) => {
        if (val != '4') {
            drawSource.clear()
            pop.value.style.display = "none";
            $map.un('pointermove', handlePointMove)
            $map.un("click", setPopup)
        } else {
            $map.on('pointermove', handlePointMove)
            $map.on("click", setPopup)
        }
    },
    { deep: true }
)
// 关闭弹窗
const del = () => {
    pop.value.style.display = "none";
}
// 初始化popup



</script>

<style lang="scss" scoped>
#popup-search-sq {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    position: absolute;
    z-index: 1000;
    top: 20px;
    left: 30px;
    background-color: #fff;
    border-radius: 5px;
    gap: 10px;
}

table {
    width: 100%;
}

td {
    font-size: 15px;
    text-align: center;
    border: 1px solid rgb(194, 190, 190);
}

.header {
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 35px;
    width: 100%;
    background-color: rgb(71, 77, 241);
    border-radius: 5px 5px 0px 0px;
}

.choose {
    display: flex;
    gap: 30px;
}


.del {
    width: 50px;
    border-radius: 5px;
    text-align: center;
    border: 1px solid rgb(194, 190, 190);
}

#close {
    width: 20px;
    color: cadetblue;
}

#close:hover {
    cursor: pointer;
}



.del:hover {
    cursor: pointer;
}
</style>